<template>
  <div class="add-templ right-con mine-templ">
    <!-- 1.0 模板设置 -->
    <div>
      <h3>
        基本信息
        <span>(必填)</span>
      </h3>
      <el-row class="half02">
        <el-col :span="6">
          <div>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-select v-model="value" placeholder="请选择" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col class="base-info">
          <ul>
            <li>
              <span>宝贝链接</span>
              <el-input type="text" placeholder="*请输入宝贝链接" size="mini"></el-input>
            </li>
            <li>
              <span>进店方式</span>
              <el-radio-group v-model="radio1" size="mini">
                <el-radio-button label="上海"></el-radio-button>
                <el-radio-button label="北京"></el-radio-button>
                <el-radio-button label="广州"></el-radio-button>
                <el-radio-button label="深圳"></el-radio-button>
              </el-radio-group>
            </li>

            <li>
              <div>
                <span>下单价格</span>
                <el-input type="text" placeholder="*请输入宝贝下单的金额" size="mini"></el-input>
              </div>
              <div>
                <span>SKU</span>
                <el-input type="text" placeholder="*请输入SKU规格及件数，默认：随机，1件" size="mini"></el-input>
              </div>
              <div>
                <span>退款时间</span>
                <el-input type="text" placeholder="2020/8/11  01:05:46" size="mini"></el-input>
              </div>
            </li>

            <li>
              <span>付款要求</span>
              <el-input
                type="text"
                placeholder="请输入付款需注意的事项，如:禁止使用官方平台无门槛优惠券、红包和返利网等优惠或返利平台，切记！！！"
                size="mini"
              ></el-input>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>

    <!-- 2.0 折叠面板 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item title="副宝贝信息(￥2)" name="1">
        <el-row class="fu half02">
          <el-col :span="6">
            <div>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
          <el-col class="fu-info">
            <ul>
              <li>
                <span>宝贝链接</span>
                <el-input type="text" placeholder="*请输入宝贝链接" size="mini"></el-input>
              </li>

              <li>
                <div>
                  <span>关键词</span>
                  <el-input type="text" placeholder="*请输入宝贝的关键词" size="mini"></el-input>
                </div>
                <div>
                  <span>下单价格</span>
                  <el-input type="text" placeholder="*请输入宝贝下单的金额" size="mini"></el-input>
                </div>
                <div>
                  <span>SKU</span>
                  <el-input type="text" placeholder="*请输入SKU规格及件数，默认：随机，1件" size="mini"></el-input>
                </div>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="筛选设置(免费)" name="2">
        <el-row class="fu other-info">
          <el-col :span="1"></el-col>
          <el-col class="fu-info">
            <ul>
              <li>
                <span>搜索排序</span>
                <el-radio-group v-model="radio1" size="mini">
                  <el-radio-button label="上海"></el-radio-button>
                  <el-radio-button label="北京"></el-radio-button>
                  <el-radio-button label="广州"></el-radio-button>
                  <el-radio-button label="深圳"></el-radio-button>
                </el-radio-group>
              </li>
              <li>
                <span>折扣/服务</span>
                <el-radio-group v-model="radio1" size="mini">
                  <el-radio-button label="上海"></el-radio-button>
                  <el-radio-button label="北京"></el-radio-button>
                  <el-radio-button label="广州"></el-radio-button>
                  <el-radio-button label="深圳"></el-radio-button>
                </el-radio-group>
              </li>
              <li>
                <span>价格区间</span>
                <el-input-number v-model="num" :min="1" :max="10" label="描述文字" size="mini"></el-input-number>
              </li>
              <li>
                <span>发货地</span>
                <area-cascader v-model="selected2" :data="pcaa"></area-cascader>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="个性定制" name="3">
        <el-row class="fu other-info">
          <el-col :span="1"></el-col>
          <el-col class="fu-info">
            <ul class="teshu">
              <li>
                <span>基础定制(￥0.2)</span>
                <el-radio-group v-model="radio1" size="mini">
                  <el-radio-button label="上海"></el-radio-button>
                  <el-radio-button label="北京"></el-radio-button>
                  <el-radio-button label="广州"></el-radio-button>
                  <el-radio-button label="深圳"></el-radio-button>
                </el-radio-group>
              </li>
              <li>
                <span>随机定制（￥0.3）</span>
                <el-radio-group v-model="radio1" size="mini">
                  <el-radio-button label="上海"></el-radio-button>
                  <el-radio-button label="北京"></el-radio-button>
                  <el-radio-button label="广州"></el-radio-button>
                  <el-radio-button label="深圳"></el-radio-button>
                </el-radio-group>
              </li>
              <li>
                <span>深度定制（￥0.5）</span>
                <el-radio-group v-model="radio1" size="mini">
                  <el-radio-button label="上海"></el-radio-button>
                </el-radio-group>
              </li>
              <li>
                <span>找茬定制</span>
              </li>
              <li>
                <span>宝贝好评找茬</span>
                <div>
                  <el-input
                    type="text"
                    placeholder="请在手机宝贝评价页中，找到一条已存在的评价内容（半年内），并填入框内，不支持符号与空格！如没有则不用填！"
                    size="mini"
                  ></el-input>
                  <el-button type="primary" size="mini">换一个</el-button>
                </div>
              </li>
              <li>
                <span>手机详情页找茬1</span>
                <div>
                  <el-input type="text" placeholder="123456" size="mini"></el-input>
                  <el-button type="primary" size="mini">换一个</el-button>
                </div>
              </li>
              <li>
                <span>手机详情页找茬2</span>
                <div>
                  <el-input type="text" placeholder="ABCDE" size="mini"></el-input>
                  <el-button type="primary" size="mini">换一个</el-button>
                </div>
              </li>
              <li>
                <span>手机详情页找茬3</span>
                <div>
                  <el-input
                    type="text"
                    placeholder="*请在手机宝贝详情页的上中下位置各找一句话（6-15字），并填入框内，不支持符号与空格！"
                    size="mini"
                  ></el-input>
                  <el-button type="primary" size="mini">换一个</el-button>
                </div>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="发布设置" name="4">
        <el-row class="fu other-info">
          <el-col :span="1"></el-col>
          <el-col class="fu-info">
            <ul class="teshu">
              <li>
                <span>发布类型</span>
                <el-radio-group v-model="radio1" size="mini">
                  <el-radio-button label="上海"></el-radio-button>
                  <el-radio-button label="北京"></el-radio-button>
                  <el-radio-button label="广州"></el-radio-button>
                  <el-radio-button label="深圳"></el-radio-button>
                </el-radio-group>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>

    <!-- 总计 -->
    <el-row class="total">
      <el-col :span="2">统计</el-col>
      <el-col :span="6">
        <span>发布笔数</span>
        <el-select v-model="value" placeholder="请选择" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <span>单笔佣金</span>
        <span>9.5</span>
      </el-col>
      <el-col :span="6">
        <span>总佣金</span>
        <span>9.5</span>
      </el-col>
    </el-row>

    <div class="submit-templ">
      <el-button type="danger" size="mini">立 即 提 交</el-button>
    </div>
  </div>
</template>

<script>
import { pca, pcaa } from 'area-data'
export default {
  data() {
    return {
      activeNames: ['1', '2', '3', '4'],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      imageUrl: '',
      radio1: '',
      num: 1,
      pca,
      pcaa,
      selected2: []
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="scss" scoped>
.add-templ {
  height: 100%;

  h3 {
    text-indent: 2em;
    color: #fff;
    line-height: 34px;
    font-size: 14px;
    background-color: #03a9f4;
  }

  .other-info {
    display: flex;

    .el-col {
      padding: 20px 0;

      li {
        display: flex;
        margin-bottom: 10px;
        line-height: 28px;

        span {
          float: left;
          width: 130px;
          text-align: center;
        }
      }

      .teshu {
        .el-input {
          padding: 0;
          width: 500px;
          border-radius: 4px;
          border: 1px solid #cccccc !important;
        }
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }

  .half02 {
    display: flex;

    .el-col {
      &:first-of-type {
        flex: 2;
        padding: 20px 0;
        width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-select {
          width: 158px;
          border: 1px solid #ccc;
          border-top: none;
        }
      }

      &:nth-of-type(2) {
        flex: 8;
        padding: 20px;

        li {
          display: flex;
          margin-bottom: 10px;
          line-height: 28px;

          span {
            float: left;
            width: 100px;
            text-align: center;
          }
        }
      }
    }

    .base-info {
      li {
        &:first-of-type {
          .el-input {
            padding: 0;
            width: 300px;
            border-radius: 4px;
            border: 1px solid #cccccc !important;
          }
        }
        &:last-of-type {
          .el-input {
            padding: 0;
            width: 90%;
            border-radius: 4px;
            border: 1px solid #cccccc !important;
          }
        }
        &:nth-last-of-type(2) {
          .el-input {
            padding: 0;
            width: 200px;
            border-radius: 4px;
            border: 1px solid #cccccc !important;
          }
        }
      }
    }
  }
}

.submit-templ {
  margin-top: 20px;
  width: 100%;
  height: 35px;
  text-align: center;

  .el-button {
    width: 80%;
    height: 35px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 158px;
  height: 158px;
  line-height: 158px;
  text-align: center;
  border: 1px dashed #ccc;
}
.avatar {
  width: 158px;
  height: 158px;
  display: block;
}

.el-collapse-item {
  text-indent: 2em;
  color: #fff;
  line-height: 34px;
  font-size: 14px;
  background-color: #03a9f4;
}

.fu {
  text-indent: 0;
}

.fu-info {
  li {
    text-indent: 0;
    &:first-of-type {
      .el-input {
        padding: 0;
        width: 270px;
        border-radius: 4px;
        border: 1px solid #cccccc !important;
        padding-right: 10px;
      }
    }
    &:nth-of-type(2) {
      .el-input {
        padding: 0;
        width: 180px;
        border-radius: 4px;
        border: 1px solid #cccccc !important;
      }
    }
  }
}

.total {
  display: flex;
  margin: 20px 0 40px;
  line-height: 34px;
  padding-left: 60px;

  .el-col {
    &:first-of-type {
      text-align: center;
      background-color: #ccc;
    }

    &:nth-last-of-type(-n + 3) {
      display: flex;
      span {
        width: 50%;
        text-align: center;
        border: 1px solid #ccc;
        &:nth-of-type(1) {
          width: 30%;
        }
        &:nth-of-type(2) {
          width: 30%;
          border-left: none;
        }
      }

      .el-select {
        border: 1px solid #ccc;
        border-left: none;
      }
    }
  }
}
</style>
